<template>
	<view id="drawer" class="drawer-content">
		<view class="header">
			<image class="avatar" :src="userInfo.avatarUrl"></image>
			<view class="header-content">
				<text class="nickName">{{userInfo.nickname}}</text>
				<view class="sign" v-if="userInfo.uid && userInfo.uid !== 0" @tap="dkf">
					<text class="iconfont1 icon-sign"></text>
					<text>签到</text>
				</view>
				<text class="login" v-if="userInfo.uid === 0" @tap="gotoLogin">
					<text>登录</text>
				</text>
			</view>
		</view>
		<view class="main">
			<view class="red-actions">
				<view
					class="red-action-item"
					v-for="(item, index) in redActions"
					:key="index"
					@tap="dkf(item)"
				>
					<text class="iconfont" :class="'icon-' + item.iconClass"></text>
					<text class="label">{{item.label}}</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="gray-actions">
				<view
					class="gray-action-item"
					v-for="(item, index) in grayActions1"
					:key="index"
					@tap="dkf(item)"
				>
					<view class="icon-wrap">
						<text class="iconfont" :class="'icon-' + item.iconClass"></text>
						<text class="label">{{item.label}}</text>
					</view>
					<view class="text-wrap" v-if="item.text">
						<text class="text">{{item.text}}</text>
						<image v-if="item.icon" class="image" :src="item.icon"></image>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="gray-actions">
				<view
					class="gray-action-item"
					v-for="(item, index) in grayActions2"
					:key="index"
					@tap="dkf(item)"
				>
					<view class="icon-wrap">
						<text class="iconfont" :class="'icon-' + item.iconClass"></text>
						<text class="label">{{item.label}}</text>
					</view>
					<view class="text-wrap" v-if="item.text">
						<text class="text">{{item.text}}</text>
						<image v-if="item.icon" class="image" :src="item.icon"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="setting" @tap="dkf">
				<text class="iconfont icon-setting"></text>
				<text class="text">设置</text>
			</view>
			<view class="loginout" @tap="loginOut">
				<text class="iconfont icon-login-out"></text>
				<text class="text">退出</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import defaultAvatar from "../../static/imgs/user/unlogin-avatarUrl.png";
	export default {
		data() {
			return {
				redActions: [
					{label: '我的消息', iconClass: 'my-message', url: ''},
					{label: '我的好友', iconClass: 'my-friends', url: ''},
					{label: '个性换肤', iconClass: 'choose-skin', url: ''},
					{label: '听歌识曲', iconClass: 'identify-song', url: ''},
				],
				grayActions1: [
					{label: '演出', iconClass: 'perform', text: '许嵩合肥站'},
					{label: '商城', iconClass: 'shopping-cart', text: '移动电源59元', icon: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'},
					{label: '附近的人', iconClass: 'people-nearby'},
				],
				grayActions2: [
					{label: '定时停止播放', iconClass: 'stop-playing'},
					// #ifndef H5
					{label: '扫一扫', iconClass: 'scan'},
					// #endif
					{label: '音乐闹钟', iconClass: 'alarm-clock'},
					{label: '音乐云盘', iconClass: 'cloud'},
					{label: '在线听歌免流量', iconClass: 'free-flow'},
					{label: '游戏推荐', iconClass: 'game-recommend', text: '3周年庆独家礼物', icon: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'},
					{label: '优惠券', iconClass: 'coupon'},
					{label: '加入网易音乐人', iconClass: 'join-wangyi'},
				],
			}
		},
		created() {
			if (!this.userInfo.avatarUrl) {
				this.userInfo.avatarUrl = defaultAvatar;
			}
			if (this.userInfo.uid == undefined) {
				uni.redirectTo({
					url: '/pages/login/index'
				});
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			loginOut() {
				this.$store.dispatch('user/loginout');
			},
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},
			dkf(item) {
				if (item.iconClass === 'scan') {
					uni.scanCode({
						success: function (res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
							uni.showToast({
								title: '条码内容' + res.result,
								icon: 'none',
								mask: false,
								duration: 1500
							});
						}
					});
				} else {
					uni.showToast({
						title: '待开发',
						icon: 'none',
						mask: false,
						duration: 1500
					});
				}
			},
			redActionTap(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.dkf();
				}
			},
		}
	}
</script>

<style lang="scss">
	.drawer-content{
		height: 100%;
		width: 100%;
		overflow: auto;
	}
	.drawer-content{
		.header{
			width: 100%;
			height: 300upx;
			padding: 100upx 40upx 0;
			background-color: rgba(235,235,235,0.6);
			box-sizing: border-box;
			.avatar{
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
			}
			.header-content{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.nickName{
					font-size: 32upx;
					color: #333;
				}
				.sign,.login{
					position: relative;
					top: -6upx;
					background:#fd1616;
					border-radius:40rpx;
					font-size:24rpx;
					padding:10rpx 24rpx;
					color:#fff;
					.iconfont{
						margin-right: 10upx;
					}
				}
			}
		}
		.main{
			width: 100%;
			box-sizing: border-box;
			padding: 40upx 40upx 100upx 40upx;
			.red-actions{
				width: 100%;
				margin-bottom: 20upx;
				display: flex;
				justify-content: space-between;
				.red-action-item{
					width: 120upx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.iconfont{
						color: red;
						font-size: 50upx;
						margin-bottom: 16upx;
					}
					.label{
						font-size: 24upx;
					}
				}
			}
			.line{
				width: 100%;
				padding: 0 10upx;
				height: 1upx;
				background: #eee;
			}
			.gray-actions{
				width: 100%;
				.gray-action-item{
					width: 100%;
					height: 80upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.icon-wrap{
						display:flex;
						justify-content:center;
						.iconfont{
							margin-right: 10upx;
							font-size: 36upx;
						}
						.label{
							font-size: 30upx;
						}
					}
					.text-wrap{
						color: #666;
						font-size: 20upx;
						.image{
							margin-left: 6upx;
							width: 32upx;
							height: 32upx;
							border-radius: 50%;
							vertical-align: middle;
						}
					}
				}
			}
		}
		.footer{
			position: fixed;
			left:0;
			bottom: 0;
			height: 100upx;
			width:100%;
			background: #fff;
			border-top: 1upx solid #eee;
			display: flex;
			.setting, .loginout{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				.iconfont{
					font-size: 40upx;
					margin-right: 6upx;
				}
				.text{
					font-size: 28upx;
				}
			}
		}
	}
</style>
